<template>
  <div @click.stop="share" :class="props.title === 'followed' ? 'sharef' : 'share'">
    <div class="line"></div>
    <div class="line1"></div><span class="yuan"></span>
  </div>
</template>

<script setup>
const emit = defineEmits(['share'])
const props = defineProps({
  title: {
    type: String
  }
});
// 点击分享按钮
const share = () => {
  emit('share')
}
</script>

<style lang="scss" scoped>
// 分享
.share,
.sharef {
  position: absolute;
  right: 0;
  bottom: 0;
  margin-bottom: 70px;
  margin-right: 17px;
  width: 34px;
  height: 34px;
  z-index: 5;

  &::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 3px solid #fff;
  }

  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 10px;
    height: 10px;
    margin-top: 9px;
    border-radius: 50%;
    border: 3px solid #fff;
  }

  .line {
    position: absolute;
    right: 0;
    top: 0;
    margin-right: 9px;
    margin-top: 10px;
    width: 12px;
    height: 3px;
    background-color: #fff;
    transform: rotate(-30deg);
  }

  .line1 {
    position: absolute;
    left: 0;
    bottom: 0;
    margin-left: 13px;
    margin-bottom: 10px;
    width: 13px;
    height: 3px;
    background-color: #fff;
    transform: rotate(30deg);
  }

  .yuan {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 3px solid #fff;
  }
}

.sharef {
  margin-bottom: 0px;
  margin-right: 140px;

  &::after {
    width: 5px;
    height: 5px;
    margin-right: 5px;
  }

  .line {
    width: 11px;
    margin-right: 13px;
  }

  .yuan {
    width: 5px;
    height: 5px;
    margin-right: 6px;
    margin-bottom: 1px;
  }

  .line1 {
    width: 11px;
    margin-left: 9px;
  }

  &::before {
    width: 7px;
    height: 7px;
  }
}
</style>